<template>
    <div class="b-content"> 
        <div class="b-header"> 
            <div class="b-title">肖秀荣考研政治1000题</div>
            <div class="b-quit" @click="quit()">返回</div>
        </div>
        <div class="book-detail">
            <div class="cover-box">
                <img class="cover-img" src="./../../public/images/tui_2021_3070.jpg"/>
            </div>
            <div class="book-info">
                <div class="bookname">肖秀荣考研政治1000题</div>
                <div class="author-and-press">肖秀荣 / 国家开放大学出版社</div>
                <div class="nums"> 
                    <div class="num">在2020年12月23日创建</div>
                </div>
                <div class="introduction">2021版更新30%题目，历届考生口碑推荐，强化考研基础</div>
            </div>
            <div class="use-data" style="margin-right:20px">
                <div class="use-data-title">使用人数</div>
                <div class="use-data-num">78</div>
            </div>
            <div class="use-data">
                <div class="use-data-title">题目数量</div>
                <div class="use-data-num">78</div>
            </div>
        </div>
        <div class="chapters">
            <div class="chapter-title">
                <div style="width:20%">ID</div>
                <div style="width:30%">章节</div>
                <div style="width:20%">题数</div>
                <div style="width:30%">操作</div>
            </div>
            <div class="chapter-item">
                <div style="width:20%" class="bd-options">1</div>
                <div style="width:30%" class="bd-options">2009年计算机统考(408)选择题部分</div>
                <div style="width:20%" class="bd-options">40</div>
                <div style="width:30%" class="bd-options">
                    <div class="b-detail b-margin">
                        <router-link to="/chapter">
                            <p class="option-icon"><i class="el-icon-info"></i></p>
                        </router-link>
                    </div>

                    <div class="b-detail b-margin">
                        <router-link to="/addq">
                            <p class="option-icon"><i class="el-icon-circle-plus-outline"></i></p>
                        </router-link>
                    </div>


                    <div class="b-detail">
                        <el-button type="text" @click="delete_"><i class="el-icon-delete"></i></el-button>


                    </div>
                </div>
            </div>

            <div class="chapter-item">
                <div style="width:20%" class="bd-options">
                    <div class="b-detail"><i class="el-icon-circle-plus-outline"></i></div>
                </div>
                <div style="width:50%"><el-input v-model="addinput" placeholder="请输入内容"></el-input></div>

                <div style="width:30%" class="bd-options">
                    <div class="b-detail">
                        <el-button type="primary" icon="el-icon-check">添加</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name:"BookDetail",
        data(){
            return {
                addinput:"",
            }
        },
        mounted(){
            this.init();
        },
        methods:{
            init(){

            },
            quit(){
                this.$router.push('/book');
            },
            delete_() {
                this.$confirm('此操作将永久删除该章节, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        }
    }
</script>

<style lang="scss">
    @import './../assets/scss/bookdetail.scss';
</style>